<template>
  <div class="contioner">
    <div class="search-form divClass" v-show="headerShow" style="padding-top: 15px">
      <a-form size="small" :model="query" layout="inline">
        <a-form-item label="厂区" prop="selectFirmList">
          <!-- <CorporateSectorCascader :configCascader="configCascader" @changeCascader="changeCascader" /> -->
          <a-cascader
            :options="query.firmList"
            :style="{ width: '260px' }"
            placeholder=""
            multiple
            @focus="getFirmGroup"
            class="bacClass"
            allow-clear
            v-model="query.selectFirmList"
            popup-container="html"
          />
        </a-form-item>
        <a-form-item label="机台" prop="machineCode">
          <a-input
            class="bacClass"
            v-model="query.machineCode"
            :style="{ width: '180px' }"
            allow-clear
          />
        </a-form-item>
        <a-form-item label="楼层" prop="areaName">
          <a-input
            class="bacClass"
            v-model="query.areaName"
            :style="{ width: '180px' }"
            allow-clear
          />
        </a-form-item>
        <a-form-item label="圆机状态" prop="state">
          <a-select
            popup-container="html"
            :style="{ width: '180px' }"
            v-model="query.state"
            allow-clear
            class="bacClass"
            @change="changeZt"
          >
            <a-option value="未启动">未启动</a-option>
            <a-option :value="1">待单</a-option>
            <a-option :value="2">待纱</a-option>
            <a-option :value="3">洗转机</a-option>
            <a-option :value="4">运行</a-option>
            <a-option :value="5">暂停</a-option>
            <a-option :value="6">维修</a-option>
            <a-option :value="7">保养</a-option>
            <!-- <a-option :value="6">无状态</a-option> -->
          </a-select>
        </a-form-item>
        <a-form-item label="调机类型" prop="maintainType">
          <a-select
            popup-container="html"
            :style="{ width: '180px' }"
            v-model="query.maintainType"
            allow-clear
            class="bacClass"
            :disabled="query.state != 0 && query.state != 1 && query.state != 2"
          >
            <a-option value="转单">转单</a-option>
            <!-- <a-option value="洗机">洗机</a-option> -->
            <a-option value="换针筒">换针筒</a-option>
            <a-option value="转配套">转配套</a-option>
            <!-- <a-option value="维修">维修</a-option> -->
            <a-option value="改纱长">改纱长</a-option>
            <a-option value="改三角">改三角</a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <div class="my-tool-bar" style="margin-bottom: 5px">
        <a-space>
          <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
          <!-- <el-button pain @click="emit('takebiaoji', 0)" plain>返回主页</el-button> -->
        </a-space>
      </div>
    </div>
    <div class="my-divisders">
      <a-divider orientation="center">
        <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
        <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
      </a-divider>
    </div>

    <div style="background-color: #f0f2f5; height: 10px"></div>
    <div :style="{ height: '50%', padding: '10px' }">
      <AgGridVuesCopys
        :rowHeight="33"
        :headerHeight="33"
        :suppressCopyRowsToClipboard="true"
        rowSelection="multiple"
        @grid-ready="gridReady"
        style="height: 90%"
        :defaultColDef="defaultColDef"
        class="ag-theme-alpine"
        :rowData="tableDataList"
        :columnDefs="tc"
        :localeText="localeText1"
      >
      </AgGridVuesCopys>
      <paginationCopys
        :total="fySelet.total"
        show-total
        show-jumper
        show-page-size
        @change="PageSize"
        @page-size-change="change"
        style="justify-content: center"
        :page-size="fySelet.size"
        :current="fySelet.page"
      />
    </div>
    <div style="height: 35%; width: 100%">
      <h2 style="width: 100%; text-align: center; margin-top: 0">机台状态图 </h2>
      <div style="text-align: center">
        <span style="font-size: 10px">状态说明:</span>
        <div class="colorDiv" style="background-color: #9fa2a8"></div
        ><span style="font-size: 10px">未启动</span>
        <div class="colorDiv" style="background-color: #cccccc"></div
        ><span style="font-size: 10px">待单</span>
        <div class="colorDiv" style="background-color: #edf356"></div
        ><span style="font-size: 10px">待纱</span>
        <div class="colorDiv" style="background-color: #c8cb73"></div
        ><span style="font-size: 10px">洗转机</span>
        <div class="colorDiv" style="background-color: #1c9a13"></div
        ><span style="font-size: 10px">运行</span>
        <div class="colorDiv" style="background-color: #2786cf"></div
        ><span style="font-size: 10px">暂停</span>
        <div class="colorDiv" style="background-color: #cf2762"></div
        ><span style="font-size: 10px">维修</span>
        <div class="colorDiv" style="background-color: #c127cf"></div
        ><span style="font-size: 10px">保养</span>
        <div class="colorDiv" style="background-color: #a0f06a"></div
        ><span style="font-size: 10px">转单</span>
        <!-- <div class="colorDiv" style="background-color: #a2bcff"></div
        ><span style="font-size: 10px">洗机</span> -->
        <div class="colorDiv" style="background-color: #fddc79"></div
        ><span style="font-size: 10px">换针筒</span>
        <div class="colorDiv" style="background-color: #ff9b9b"></div
        ><span style="font-size: 10px">转配套</span>
        <div class="colorDiv" style="background-color: #d035f7"></div
        ><span style="font-size: 10px">改纱长</span>
        <div class="colorDiv" style="background-color: #f2c0ff"></div
        ><span style="font-size: 10px">改三角</span>
      </div>

      <div style="padding: 10px; height: 90%; overflow: auto">
        <div class="jtClass" v-for="(item, index) in tableDataList" :key="index">
          <div
            style="
              position: absolute;
              top: 17px;
              left: 0;
              text-align: center;
              height: 50px;
              width: 100px;
            "
          >
            机台:{{ item['machineCode'] }}</div
          >
          <!-- 0未启动 1待单 2待纱 3洗转机 4运行 5暂停 6维修 7保养 -->
          <div
            style="display: inline-block; height: 100%; background-color: #9fa2a8; width: 50%"
            v-if="item['machineState'] == '未启动'"
          ></div>
          <div
            style="display: inline-block; height: 100%; background-color: #cccccc; width: 50%"
            v-if="item['machineState'] == '待单'"
          ></div>
          <div
            style="display: inline-block; height: 100%; background-color: #edf356; width: 50%"
            v-if="item['machineState'] == '待纱'"
          ></div>
          <div
            style="display: inline-block; height: 100%; background-color: #c8cb73; width: 50%"
            v-if="item['machineState'] == '洗转机'"
          ></div>
          <div
            style="display: inline-block; height: 100%; background-color: #1c9a13; width: 50%"
            v-if="item['machineState'] == '运行'"
          ></div>
          <div
            style="display: inline-block; height: 100%; background-color: #2786cf; width: 50%"
            v-if="item['machineState'] == '暂停'"
          ></div>
          <div
            style="display: inline-block; height: 100%; background-color: #cf2762; width: 50%"
            v-if="item['machineState'] == '维修'"
          ></div>
          <div
            style="display: inline-block; height: 100%; background-color: #c127cf; width: 50%"
            v-if="item['machineState'] == '保养'"
          ></div>
          <!-- <div style="display: inline-block;height: 100%;background-color:#a8bf99;width: 50%;"
                        v-if="item['state'] > 5"></div> -->
          <!-- 转单  改纱长  改三角  换针筒  转配套 -->
          <div
            style="display: inline-block; height: 100%; background-color: #a0f06a; width: 50%"
            v-if="item['maintainType'] == '转单'"
          ></div>
          <!-- <div
            style="display: inline-block; height: 100%; background-color: #a2bcff; width: 50%"
            v-if="item['maintainType'] == '洗机'"
          ></div> -->
          <div
            style="display: inline-block; height: 100%; background-color: #fddc79; width: 50%"
            v-if="item['maintainType'] == '换针筒'"
          ></div>
          <div
            style="display: inline-block; height: 100%; background-color: #ff9b9b; width: 50%"
            v-if="item['maintainType'] == '转配套'"
          ></div>
          <div
            style="display: inline-block; height: 100%; background-color: #d035f7; width: 50%"
            v-if="item['maintainType'] == '改纱长'"
          ></div>
          <div
            style="display: inline-block; height: 100%; background-color: #f2c0ff; width: 50%"
            v-if="item['maintainType'] == '改三角'"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  
  import { Message } from '@arco-design/web-vue'
  import { ref, reactive, onMounted, watch } from 'vue'
  import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
  // 引入element提示
  //引入封装post
  import { post } from '@/api/http'
  import { Search, EditPen } from '@element-plus/icons-vue'
  import { localeText } from '@/api/aggridZw'
  import { slicing } from '@/utils/caseFrimAndSecRig'
  const localeText1: any = ref(localeText)
  const emit = defineEmits(['takebiaoji'])
  const headerShow = ref<boolean>(true)

  const configCascader = ref<{}>({
    corporateWidth: '200px', //公司宽度
    sectorWidth: '180px', //部门宽度
    corporateRquired: false, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '厂区', //公司label
    sectorName: '选择部门', //部门label
    cascaderShow: 'sector', //配置部门不显示
  })
  const changeCascader = (data: any) => {
    const { corporateId, sectorId, sectorLabel, corporateLabel } = data
    query.planOrderCode = corporateId
  }

  const fySelet: any = reactive({
    total: 0,
    size: 10,
    page: 1,
  })

  const PageSize = (val: any) => {
    fySelet.page = val
    selectJt()
  }

  const change = (val: any) => {
    fySelet.size = val
    selectJt()
  }

  interface Querin {
    planOrderCode: string
    machineCode: string
    areaName: string
    state: any
    maintainType: any
    firmList: any[]
    selectFirmList: any[]
  }
  //getlist初始化接口参数
  let query = reactive<Querin>({
    planOrderCode: '',
    machineCode: '',
    areaName: '',
    state: null,
    maintainType: '',
    firmList: [],
    selectFirmList: [],
  })

  const tableDataList: any = ref([])
  const gridOption = ref()
  const gridReady = (params: any) => {
    gridOption.value = params.api
  }
  const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    flex: 1,
  }

  const tc = [
    {
      headerName: '公司',
      field: 'firm',
      width: 150,
    },
    {
      headerName: '楼层',
      field: 'areaName',
      width: 150,
    },
    {
      headerName: '机台编号',
      field: 'machineCode',
      width: 150,
    },
    {
      headerName: '设备机型',
      field: 'machineTypeName',
      width: 150,
    },
    {
      headerName: '机器名称',
      field: 'machineName', //
      width: 150,
    },
    // {
    //     headerName: '针寸数',
    //     field: 'mouthBigDecimal',
    //     width: 150
    // },
    {
      headerName: '客户名称',
      field: 'customName', //
      width: 150,
    },
    {
      headerName: '调机类型',
      field: 'maintainType', //
      width: 150,
    },
    {
      headerName: '圆机状态',
      field: 'machineState',
      // cellRenderer: {
      //   template: `<span>{{val}}</span>`,
      //   setup(props: any) {
      //     return {
      //       val:
      //         props.params.data.machineState == 0
      //           ? '未启动'
      //           : props.params.data.machineState == 1
      //           ? '待单'
      //           : props.params.data.machineState == 2
      //           ? '待纱'
      //           : props.params.data.machineState == 3
      //           ? '洗转机'
      //           : props.params.data.machineState == 4
      //           ? '运行'
      //           : props.params.data.machineState == 5
      //           ? '暂停'
      //           : props.params.data.machineState == 6
      //           ? '维修'
      //           : props.params.data.machineState == 7
      //           ? '保养'
      //           : '未启动',
      //     }
      //   },
      // },
      // filterParams: {
      //   valueFormatter: function (params: any) {
      //     return params.value == '0'
      //       ? '未启动'
      //       : params.value == '1'
      //       ? '待单'
      //       : params.value == '2'
      //       ? '待纱'
      //       : params.value == '3'
      //       ? '洗转机'
      //       : params.value == '4'
      //       ? '运行'
      //       : params.value == '5'
      //       ? '暂停'
      //       : params.value == '6'
      //       ? '维修'
      //       : params.value == '7'
      //       ? '保养'
      //       : ''
      //   },
      // },
      width: 150,
    },
  ]

  function selectJt() {
    console.log(query.selectFirmList)

    let data = {
      page: fySelet.page,
      size: fySelet.size,
      // firmId: query.selectFirmList,
      // state: query.state,
      // areaName: query.areaName,
      // machineCode: query.machineCode,
      // maintainType: query.maintainType,
      otherFirmIds: query.selectFirmList,
      otherMachineState: query.state,
      areaName: query.areaName,
      machineCode: query.machineCode,
      maintainType: query.maintainType,
    }
    post({
      //原接口 url: 'planSingle/report/circularMachine',
      url: 'product/statement/getMachineDetail',
      data,
    }).then((res: any) => {
      if (res.code == 200) {
        tableDataList.value = res.data.list
        fySelet.total = res.data.total
      } else {
        Message.error(res.message)
      }
    })
  }

  // 获取公司列表
  const getFirmGroup = () => {
    post({
      url: 'org/baCompany/getTreeCompanyOrDepartment',
      data: {},
    }).then(({ code, data }) => {
      if (code === 200) {
        query.firmList = data
      }
    })
  }
  const getList = () => {
    fySelet.page = 1
    selectJt()
  }
  function changeZt(e: any) {
    query.maintainType = ''
  }
</script>
<style scoped>
  .contioner {
    height: 100%;
    background: #fff;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }

  .colorDiv {
    display: inline-block;
    width: 20px;
    height: 10px;
    font-size: 10px;
    margin-left: 5px;
  }

  .jtClass {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
    border: 1px solid #ccc;
    vertical-align: top;
  }

  .divWid {
    width: 50% !important;
  }

  :deep(.arco-select-view-multiple .arco-select-view-inner) {
    flex: 1;
    overflow: auto !important;
    line-height: 0;
    height: 60px !important;
  }
</style>
